<template>
  <div>
    <van-loading type="spinner" v-if="isLoading" />
    <van-icon
      v-else
      :name="value === 1 ? 'good-job' : 'good-job-o'"
      :color="value === 1 ? '#3296fa' : '#777'"
      @click="zanHandler"
    />
  </div>
</template>

<script>
import { addArticleZan, deleteArticleZan } from "@/api/article";
import { mapGetters } from "vuex";
export default {
  name: "zanArticle",
  props: {
    //  第一步： 设置value变量
    value: {
      type: Number,
      required: true,
    },
    articleId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async zanHandler() {
      if (!this.token) return this.$toast.fail("请登录");
      this.isLoading = true;
      try {
        if (this.value === 1) {
          await deleteArticleZan(this.articleId);
        } else {
          await addArticleZan({
            target: this.articleId,
          });
        }
        this.$toast.success("操作成功");
        const newVal = this.value === 1 ? 0 : 1;
        this.$emit("input", newVal);
      } catch (error) {
        console.log(error);
        this.$toast.fail("操作失败");

      }
      this.isLoading = false;
    },
  },
  computed: {
    ...mapGetters(["token"]),
  },
};
</script>

<style>
</style>